<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import IOSComponent from "./ios.vue";
import AndroidComponent from "./android.vue";
import OtherComponent from './other.vue'
const deviceComponent = ref(null);
const screenWidth = window.innerWidth;
const checkPlatform = () => {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (/android/i.test(userAgent) && screenWidth < 600) {
    deviceComponent.value = AndroidComponent;
  } else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream && screenWidth < 600) {
    console.log('mac')
    deviceComponent.value = IOSComponent;
  } else {
    deviceComponent.value = OtherComponent
  }
};

onMounted(() => {
  checkPlatform();
});
</script>

<template>
  <div>
    <component :is="deviceComponent" />
  </div>
</template>

<style scoped></style>
